import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/storage'

Vue.use(VueRouter)

const router = new VueRouter({
  // mode: 'history', // 添加history模式，URL更美观
  routes: [
    // 首页
    {
      path: '/',
      component: () => import('@/views/layout'),
      redirect: '/dashboard',
      children: [
        {
          path: 'dashboard',
          component: () => import('@/views/dashboard'),
          meta: { title: '数据看板', requiresAuth: true }
        },
        {
          path: 'article',
          component: () => import('@/views/article'),
          meta: { title: '面经管理', requiresAuth: true }
        }
      ]
    },
    // 登录页
    {
      path: '/login',
      component: () => import('@/views/login'),
      meta: { title: '登录' }
    },
    // 404页面
    {
      path: '/404',
      component: () => import('@/views/notFound'),
      meta: { title: '404 - 页面不存在' }
    },
    // 任意未匹配路径都跳转到404
    {
      path: '*',
      redirect: '/404'
    }
  ]
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
  const token = getToken()

  // 设置页面标题
  if (to.meta && to.meta.title) {
    document.title = `${to.meta.title} - 黑马面经运营后台`
  }

  // 需要认证的路由
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!token) {
      // 没有token，重定向到登录页，并记录原始路径
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    // 公共路由（登录页、404页）
    if (token && to.path === '/login') {
      // 已登录状态下访问登录页，重定向到首页
      next('/')
    } else {
      next()
    }
  }
})

// 路由后置守卫
router.afterEach((to, from) => {
  console.log(`从 ${from.path} 跳转到 ${to.path}`)
})

export default router
